// import echarts from "echarts";
import * as echarts from 'echarts';

var colorList = [
  "#91cc75",
  "#5470c6",
  "#73c0de",
  "#fac858",
  "#ee6666",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
];

var theme = {
  color: colorList,
  title: {
    textStyle: {
      fontWeight: "normal",
      color: "#008acd",
    },
  },
  visualMap: {
    itemWidth: 15,
    color: ["#5ab1ef", "#e0ffff"],
  },

  toolbox: {
    iconStyle: {
      normal: {
        borderColor: colorList[0],
      },
    },
  },

  tooltip: {
    backgroundColor: "rgba(50,50,50,0.5)",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "#008acd",
      },
      crossStyle: {
        color: "#008acd",
      },
      shadowStyle: {
        color: "rgba(200,200,200,0.2)",
      },
    },
  },

  dataZoom: {
    dataBackgroundColor: "#efefff",
    fillerColor: "rgba(182,162,222,0.2)",
    handleColor: "#008acd",
  },

  grid: {
    borderColor: "#eee",
  },

  categoryAxis: {
    axisLine: {
      lineStyle: {
        color: "#008acd",
      },
    },
    splitLine: {
      lineStyle: {
        color: ["#eee"],
      },
    },
  },

  valueAxis: {
    axisLine: {
      lineStyle: {
        color: "#008acd",
      },
    },

    splitLine: {
      lineStyle: {
        color: ["#eee"],
      },
    },
  },

  timeline: {
    lineStyle: {
      color: "#008acd",
    },
    controlStyle: {
      normal: { color: "#008acd" },
      emphasis: { color: "#008acd" },
    },
    symbol: "emptyCircle",
    symbolSize: 3,
  },

  line: {
    smooth: true,
    symbol: "emptyCircle",
    symbolSize: 3,
  },

  candlestick: {
    itemStyle: {
      normal: {
        color: "#d87a80",
        color0: "#2ec7c9",
        lineStyle: {
          color: "#d87a80",
          color0: "#2ec7c9",
        },
      },
    },
  },

  scatter: {
    symbol: "circle",
    symbolSize: 4,
  },

  map: {
    label: {
      normal: {
        textStyle: {
          color: "#d87a80",
        },
      },
    },
    itemStyle: {
      normal: {
        borderColor: "#eee",
        areaColor: "#ddd",
      },
      emphasis: {
        areaColor: "#fe994e",
      },
    },
  },

  graph: {
    color: colorList,
  },

  gauge: {
    axisLine: {
      lineStyle: {
        color: [
          [0.2, "#2ec7c9"],
          [0.8, "#5ab1ef"],
          [1, "#d87a80"],
        ],
        width: 5,
      },
    },
    axisTick: {
      splitNumber: 5,
      length: 10,
      lineStyle: {
        color: "auto",
      },
    },
    splitLine: {
      length: 22,
      lineStyle: {
        color: "auto",
      },
    },
    pointer: {
      width: 5,
    },
  },
};

echarts.registerTheme("customized", theme);
